Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.
Learn More
Callout List - Main Content
Optional Section Header
Suspendisse Eu Maximus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.
Lorem Ipsum Dolor Sit
Curabitur Maximus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.
Learn More
HTML
<section class="callout-list" role='list' aria-label='articles list'>
<h2 class="h2">Optional Section Header</h2>
<div class="callout-list__row" role="listitem">
<a href="#" class="callout-list__item">
<article class="callout-list__item-1" aria-label="Lorem Ipsum">
<div class="callout-list__item-inner">
<h3 class="callout-list__item-title">Lorem Ipsum</h3>
<img src="/images/temp/callout-list-1.jpg" class="callout-list__item-image" alt="#">
<p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
<p class="callout-list__item-cta">Learn More</p>
</div>
</article>
</a>
<a href="#" class="callout-list__item">
<article class="callout-list__item-1" aria-label="Suspendisse Eu Maximus">
<div class="callout-list__item-inner">
<h3 class="callout-list__item-title">Suspendisse Eu Maximus</h3>
<img src="/images/temp/callout-list-2.jpg" class="callout-list__item-image" alt="#">
<p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
<p class="callout-list__item-cta">Lorem Ipsum Dolor Sit</p>
</div>
</article>
</a>
<a href="#" class="callout-list__item">
<article class="callout-list__item-1" aria-label="Curabitur Maximus">
<div class="callout-list__item-inner">
<h3 class="callout-list__item-title">Curabitur Maximus</h3>
<img src="/images/temp/callout-list-3.jpg" class="callout-list__item-image" alt="#">
<p class="callout-list__item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante lorem. Vestibulum sagittis arcu et lorem finibus, a euismod nisi egestas. Curabitur tempus rhoncus vehicula.</p>
<p class="callout-list__item-cta">Learn More</p>
</div>
</article>
</a>
</div>
</section> <!-- .callout-list -->Notes
Wrapping classes: l-content-primary
Templates this appears on: